<template>
<view>
<!--pages/hotelDetail/hotelDetail.wxml-->
<!--<import src="template.wxml"></import>-->

<view class="hotelDetailPic">
     <image :src=hotelImageUrl class="image" mode="aspectFill"></image>

     <view class="introduce">
          <view class="hotelName">{{hotelName}}</view>
          <view class="text">酒店介绍</view>
     </view>
</view>

<view class="addressItem">
     <image class="locationIcon" mode="aspectFit" src="/static/res/images/ic_city_location.png"></image>
     <text class="address">{{hotelAddress}} \n 电话：{{hotelPhone}}</text>
		 <image  class="phoneIcon" mode="aspectFill" src="/static/res/images/ic_hotel_phone.png" ></image>
</view>

<view class="serviceItem">
     <text class="title">配套设施</text>
     <scroll-view class="serviceList" scroll-x>
          <view style="width:100%;">
               <view v-for="(item, index) in serviceList" :key="index" class="service">
                    <image class="icon" mode="widthFix" :src="item.icon"></image>
                    <text class="text">{{item.name}}</text>
               </view>
          </view>
     </scroll-view>
</view>

<view style="width:100%;height:16rpx;background:#dedede"></view>

<view class="divideItem">
     <text class="divideText">入住</text>
     <text class="divideText">退房</text>
</view>

<!-- 日期计算  -->
<view class="dateContent">
     <view class="dateItem">
          <picker class="date" mode="date" :value="startDate" :start="currentDate" :end="endOfStartDate" @change="startDateChange">
               <view class="date">
                    <text class="day">{{startDay}}</text>
                    <view class="monthWeek">
                         <text class="month">{{startMonth}}月</text>
                         <text class="week">{{startWeek}}</text>
                    </view>
               </view>
          </picker>
          <view class="horizontalLine" style="width:60rpx;position:absolute;right:0;"></view>
     </view>
     <text class="dayCount">{{dayCount}}天</text>
     <view class="dateItem">
          <view class="horizontalLine" style="width:60rpx;position:absolute;"></view>
          <picker class="date" mode="date" :value="endDate" :start="startDate" :end="endOfEndDate" @change="endDateChange">
               <view class="date">
                    <text class="day">{{endDay}}</text>
                    <view class="monthWeek">
                         <text class="month">{{endMonth}}月</text>
                         <text class="week">{{endWeek}}</text>
                    </view>
               </view>
          </picker>
     </view>
</view>
<!-- 日期end  -->

<scroll-view  scroll-y="true" :scroll-top="scrollTop">
          <view class="content">
							<view style="margin: 20rpx 0;">
								<div style="padding-left: 10rpx;">民宿介绍</div>
								<div style="width: 100%; height: 1rpx; background-color: #777777;"></div>
							</view>
               <view  style="padding: 40rpx;margin-bottom: 100rpx;">
								  <view class="view">
										<view class="grace-rich-text">
											<rich-text type="text" :nodes="demoHtml"></rich-text>
										</view>
									</view>
							 </view>
          </view>
</scroll-view>
<uni-goods-nav :fill="true" style="width:100%;position:fixed ;bottom: 0;"  :options="options" :buttonGroup="buttonGroup"  @click="bookRoom" @buttonClick="bookRoom" />

</view>
</template>

<script>
// pages/hotelDetail/hotelDetail.js
var app = getApp();
var _self;
var graceRichText = require("@/static/richText.js");
import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
export default {
  data() {
    return {
			//现在
			currentYear: new Date().getFullYear(),
			currentMonth: new Date().getMonth() + 1,
			currentDay: new Date().getDate(),
			currentWeek: new Date().getDay(),
			currentDate: '', // 当前日期
			//入住
			startDate: app.globalData.startDate,
			startYear:'',
			startDay:'',
			startMonth:'',
			startWeek:'',
			endOfStartDate:'2021-12-31', //最大选择入住日期
			startDayCount:'', // 入住日期月份的最大天数
 			//离开
			endDate: app.globalData.endDate,
			endYear:'',
			endDay:'',
			endMonth:'',
			endWeek:'',
			endOfEndDate:'2021-12-31', //最大选择离开日期
			dayCount: 1, // 离开日期 - 入住日期
			scrollTop: 0,
			// 民宿详情
			hotelId:'',
      hotelName: '',
			hotel_desc:'',
			hotel_price : '',
			hotelImageUrl:"",
      hotelAddress: '',
			hotelPhone:'',
			demoHtml:'',
			buttonGroup: [
			// 	{
			// 	text: '加入收藏',
			// 	backgroundColor: '#ff0000',
			// 	color: '#fff'
			// },
			{
				text: '立即预约',
				backgroundColor: '#ffa200',
				color: '#fff'
			}],
      serviceList: [{
        icon: "/static/res/images/ic_service_park.png",
        name: '叫车服务'
      }]
    };
  },

  components: { uniGoodsNav },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    this.initDate();
		await this.hotelDetail(options)
    var hotelName = options.name;
    var address = options.address;
    var distance = options.distance;

    if (hotelName !== undefined) {
      this.setData({
        hotelName: hotelName,
        hotelAddress: address + '\n电话号码:' + phone
      });
    }
  },

  
  methods: {
		initDate(){
			this.startDate = app.globalData.startDate
			this.endDate = app.globalData.endDate
			this.currentDate = this.currentYear + '-' + this.currentMonth + '-' + this.currentDay
			var startArray = this.startDate.split('-');
			this.startYear = parseInt(startArray[0]);
			this.startMonth = parseInt(startArray[1]);
			this.startDay = parseInt(startArray[2]);
			this.startWeek = new Date(this.startYear, this.startMonth, this.startDay).getDay();
			var endArray = this.endDate.split('-');
			this.endYear = parseInt(endArray[0]);
			this.endMonth = parseInt(endArray[1]);
			this.endDay = parseInt(endArray[2]);
			this.endWeek = new Date(this.endYear, this.endMonth, this.endDay).getDay();
			this.setSearchDate()
		},
		
		hotelDetail(options){
			_self = this;
			let {id} = options
			uniCloud.callFunction({
				name: 'hotelDetail',
				data: {id},
				success: (res) => {
					console.log(res.result.data)
					let {_id,hotelName,hotel_desc,price,hotel_image,hotel_address,phone,serList} = res.result.data
					_self.demoHtml = graceRichText.format(hotel_desc);
					this.setData({
						hotelId:_id,
						hotelName:hotelName,
						hotel_desc:hotel_desc,
						hotel_price: price,
						hotelImageUrl:hotel_image,
						hotelAddress: hotel_address,
						hotelPhone: phone,
						serviceList: serList
					})
				},
				complete: () => {
					this.loadenable = false
				}
			})
		},
		
    bookRoom: function (e) {
			console.log(app.globalData.userInfo, app.globalData.userInfo.openid)
			if (app.globalData.userInfo.openid && app.globalData.userInfo.openid != '' && app.globalData.userInfo.openid != null ) {
				let {index} = e
				console.log('预约',this.hotel_price)
				uni.navigateTo({
				  url: '../bookHotel/bookHotel?id='+ this.hotelId + '&price=' + this.hotel_price + '&hotelAddress=' + this.hotelAddress + '&hotelPhone=' + this.hotelPhone + '&hotelName=' + this.hotelName + '&startDate=' + this.startDate + '&endDate=' + this.endDate + '&dayCount=' + this.dayCount
				});
			}else{
				uni.showModal({
						title: '提示',
						content: '请先授权登录',
						success: (res)=> {
								if (res.confirm) {
									 uni.switchTab({
											 url: '/pages/minePage/minePage'
									 });
								} else if (res.cancel) {
										console.log('用户点击取消');
								}
						}
				});
			}
    },
    startDateChange(e) {
      console.log(e);
      this.startDate = e.detail.value;
      var startArray = this.startDate.split('-');
      this.startYear = parseInt(startArray[0]);
      this.startMonth = parseInt(startArray[1]);
      this.startDay = parseInt(startArray[2]);
      this.startWeek = new Date(this.startYear, this.startMonth, this.startDay).getDay();
      var startFormat = this.formatDate(this.startDate);
      var endFormat = this.formatDate(this.endDate);

      if (new Date(endFormat) < new Date(startFormat)) {
        this.initEndDate();
      }

      this.setSearchDate();
    },
    endDateChange(e) {
      console.log(e);
      this.endDate = e.detail.value;
      var endArray = this.endDate.split('-');
      this.endYear = parseInt(endArray[0]);
      this.endMonth = parseInt(endArray[1]);
      this.endDay = parseInt(endArray[2]);
      this.endWeek = new Date(this.endYear, this.endMonth, this.endDay).getDay();
      this.setSearchDate();
    },
		// 日期格式化
    formatDate: function (date) {
      return date.replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/(-)/g, '/');
    },
    getWeekday: function (week) {
      var weekday = new Array(7);
      weekday[0] = "周日";
      weekday[1] = "周一";
      weekday[2] = "周二";
      weekday[3] = "周三";
      weekday[4] = "周四";
      weekday[5] = "周五";
      weekday[6] = "周六";
      return weekday[week];
    },
		
    prefixInteger: function (num, length) {
      return (Array(length).join('0') + num).slice(-length);
    },
    getDayCount: function (startDate, endDate) {
      var startFormat = this.formatDate(startDate);
      var endFormat = this.formatDate(endDate);
      var start = new Date(startFormat);
      var end = new Date(endFormat);
      var result = end - start;

      if (result >= 0) {
        var days = parseInt(result / (1000 * 60 * 60 * 24));
        return days == 0 ? 1 : days;
      } else {
        return 0;
      }
    },
    initEndDate() {
			let {startMonth , startDay , currentWeek } = this
      this.startDayCount = new Date(this.startYear, this.startMonth, 0).getDate();

      if (startMonth == 12 && startDay == 31) {
        this.endYear = this.startYear + 1;
        this.endMonth = 1;
        this.endDay = 1;
      } else {
        this.endYear = this.startYear;

        if (startDay <= this.startDayCount) {
          this.endMonth = startMonth;
          this.endDay = startDay + 1;
        } else {
          this.endMonth = startMonth + 1;
          this.endDay = 1;
        }
      }

      if (currentWeek >= 7) {
        this.endWeek = 1;
      } else {
        this.endWeek = currentWeek + 1;
      }

      this.endDate = this.endYear + '-' + this.endMonth + '-' + this.endDay;
    },
    setSearchDate() {
			this.startDay = this.prefixInteger(this.startDay, 2)
			this.startMonth = this.prefixInteger(this.startMonth, 2)
			this.startWeek = this.getWeekday(this.startWeek)
			this.endDay = this.prefixInteger(this.endDay, 2)
			this.endMonth = this.prefixInteger(this.endMonth, 2)
			this.endWeek = this.getWeekday(this.endWeek)
			this.dayCount = this.getDayCount(this.startDate, this.endDate)
    }
  }
};
</script>
<style>
/* pages/hotelDetail/hotelDetail.wxss */
.view{font-size:28upx;}
.grace-rich-text{padding:10upx 30upx;}
Page {
     width: 100%;
     display: flex;
     flex-direction: column;
     position: relative;
     box-sizing: border-box;
}

.divideItem {
     box-sizing: border-box;
     width: 100%;
     background: white;
     padding: 24rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
}

.divideText {
     flex: 1;
     text-align: center;
     font-size: 24rpx;
     color: #999;
}

.dateContent {
     width: 100%;
     height: max-content;
     display: flex;
     flex-direction: row;
     padding: 10rpx 10rpx 26rpx;
     box-sizing: border-box;
     align-items: center;
     border-bottom: 1rpx solid #eee;
}

.dateItem {
     flex: 1;
     display: flex;
     flex-direction: row;
     align-items: center;
     position: relative;
}

.dateItem .date {
     display: flex;
     flex-direction: row;
     margin: 0 auto;
}

.dateItem .date .day {
     height: fit-content;
     font-size: 45rpx;
     color: #ee6715;
     text-align: center;
}

.dateItem .date .monthWeek {
     height: fit-content;
     display: flex;
     flex-direction: column;
     margin-left: 6rpx;
}

.dateItem .date .monthWeek .week, .dateItem .date .monthWeek .month {
     flex: 1;
     font-size: 22rpx;
}

.dayCount {
     font-size: 32rpx;
     margin: 0 10rpx;
}

.roomListItem {
     width: 100%;
     height: 172rpx;
     padding: 16rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
     position: relative;
     border-bottom: 1rpx solid #ccc;
     box-sizing: border-box;
}

.roomListItem .image {
     width: 140rpx;
     height: 140rpx;
     /* border-radius: 20rpx; */
     margin-right: 16rpx;
}

.roomListItem .content {
     display: flex;
     flex-direction: column;
     position: absolute;
     left: 166rpx;
     right: 16rpx;
     top: 16rpx;
     bottom: 16rpx;
}

.content .scoreItem, .content .roomService, .content .priceItem {
     display: flex;
     flex: 1;
     flex-direction: row;
     align-items: center;
}

.content .roomService {
     color: #777;
     font-size: 24rpx;
}

.content .roomName {
     font-size: 30rpx;
     font-weight: bold;
     color: black;
     flex: 1;
}

.content .priceItem {
     /*让文字沉底的方法 */
     display: table-cell;
     vertical-align: bottom;
}

.content .priceItem .price {
     font-size: 35rpx;
     font-weight: bold;
     color: #ff1d1d;
}

.content .priceItem .priceTip {
     font-size: 24rpx;
     color: #3f3f3f;
}

.bookBtn, .bookBtnHover {
     position: absolute;
     right: 16rpx;
     bottom: 16rpx;
     border-radius: 8rpx;
     color: white;
     font-size: 26rpx;
     padding: 8rpx 32rpx;
}

.bookBtn {
     background: #fe7e38;
}

.bookBtnHover {
     background: #e55509;
}

.hotelDetailPic {
     width: 100%;
     height: 330rpx;
     position: relative;
}

.hotelDetailPic .image {
     width: 100%;
     height: 100%;
}

.hotelDetailPic .introduce {
     width: 100%;
     height: 70rpx;
     box-sizing: border-box;
     display: flex;
     padding: 0 20rpx;
     flex-direction: row;
     background: rgba(141, 73, 73, 0.6);
     /* opacity: 0.6; */
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     align-items: center;
}

.hotelDetailPic .introduce .hotelName, .hotelDetailPic .introduce .text {
     color: white !important;
     font-size: 28rpx;
}

.hotelDetailPic .introduce .hotelName {
     flex: 1;
}

.addressItem {
     width: 100%;
     height: 110rpx;
     display: flex;
     flex-direction: row;
     align-content: center;
     overflow: hidden;
     border-bottom: 1rpx solid #dedede;
}

.addressItem .locationIcon {
     width: 24rpx;
     height: 24rpx;
     padding: 24rpx 0;
     margin-left: 35rpx;
     margin-top: 6rpx;
}

.addressItem .address {
     flex: 1;
     font-size: 24rpx;
     padding: 24rpx 0;
     color: #777;
     margin: 0 20rpx 0 8rpx;
}

.addressItem .phoneIcon {
     width: 140rpx;
     height: 100%;
}

.serviceItem {
     display: flex;
     width: 100%;
     flex-direction: row;
     height: 80rpx;
     box-sizing: border-box;
     align-items: center;
     padding: 0 20rpx;
}

.serviceItem .title {
     font-size: 24rpx;
     color: #999;
     margin-right: 20rpx;
}

.serviceItem .serviceList {
     display: flex;
     flex: 1;
     flex-direction: row;
     align-items: center;
     overflow: scroll;
     white-space: nowrap;
}

.serviceItem .serviceList .service {
     display: inline-block;
     width: 150rpx;
     justify-content: center;
     flex-direction: row;
     align-items: center;
}

.serviceItem .serviceList .service .icon {
     width: 24rpx;
     height: 24rpx;
}

.serviceItem .serviceList .service .text {
     margin-left: 8rpx;
     font-size: 24rpx;
     color: #333;
     text-align: center;
}

</style>